<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图片切换案例</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #000;}
    #box{width: 420px;height: 450px;padding: 10px;background: #fff;margin: 60px auto;text-align: center;}
    button{width: 68px;margin: 8px;}
    #p1{font-size: 16px;line-height: 40px;}
    #box_1{width: 400px;height: 350px;position: relative;border: 10px solid #E54D0F;}
    img{width: 400px;height: 350px;}
    strong,#p2{width: 400px;height: 30px;background: rgba(198,198,198,0.6);line-height: 30px;}
    strong{position: absolute;top: 0;}
    #p2{position: absolute;bottom: 0;}
    #bt3,#bt4{width: 30px;height: 30px;border: none;background: rgba(198,198,198,0.3);outline: none;}
    #bt3{position: absolute;left: 10px;top: 150px;}
    #bt4{position: absolute;right: 10px;top: 150px;}
    #bt3:hover,#bt4:hover{background: rgba(198,198,198,0.9);}
  </style>
</head>
<body>
  <div id="box">
    <button id="bt1">循环切换</button>
    <button id="bt2">顺序切换</button>
    <p id="p1">图片可从最后一张跳转到第一张循环切换</p>
    <div id="box_1">
      <strong id="str">文字加载中......</strong>
      <p id="p2">文字加载中......</p>
      <img id="image">
      <button id="bt3"><</button>
      <button id="bt4">></button>
    </div>
  </div>
  <script type="text/javascript">
      var bt1 = document.getElementById('bt1');
      var bt2 = document.getElementById('bt2');
      var bt3 = document.getElementById('bt3');
      var bt4 = document.getElementById('bt4');
      var image = document.getElementById('image');
      var p1 = document.getElementById('p1');
      var p2 = document.getElementById('p2');
      var str = document.getElementById('str');
      var num = 0;
      var onoff = true;
      var arr1 = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
      var arr2 = ["图片一","图片二","图片三","图片四","图片五"];
      bt1.onclick = function (){
        onoff = true;
        p1.innerHTML = "图片可从最后一张跳转到第一张循环切换";
      }
      bt2.onclick = function (){
        onoff = false;
        p1.innerHTML = "图片只能到最后一张或者第一张";
      }
      function Int(){
        str.innerHTML = num + 1 + "/" + arr1.length;
        image.src = arr1[num];
        p2.innerHTML = arr2[num];
      }
      Int();
      bt3.onclick = function(){
        num--;
        if(num < 0){
          if(onoff){
            num = arr1.length - 1;
          }else{
            num = 0;
          }
        }
        Int();
      }
      bt4.onclick = function (){
        num++;
        if(num == arr1.length){
          if(onoff){
            num = 0;
          }else{
            num = arr1.length - 1;
          }
        }
        Int();
      }
  </script>
</body>
</html>